<template>
  <div class="root-container" v-loading.fullscreen.lock="isLoading">
    <el-tabs
      v-model="activeTabName"
      @tab-click="handleTabClick"
      type="border-card"
    >
      <el-tab-pane name="AreaComposition">
        <template #label>
          <span class="custom-tabs-label-frist">空域组合</span>
        </template>
        <AreaComposition />
      </el-tab-pane>
      <el-tab-pane name="SectorScheme">
        <template #label>
          <span class="custom-tabs-label">扇区方案</span>
        </template>
        <SectorScheme />
      </el-tab-pane>
      <el-tab-pane name="AreaComputing">
        <template #label>
          <span class="custom-tabs-label">计算测试</span>
        </template>
        <TryComputing />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import useCEMStore from "@/store/CEM.js";

import AreaComposition from "./AreaComposition/index.vue";
import SectorScheme from "./SectorScheme/index.vue";
import TryComputing from "./TryComputing/index.vue";

const CEMStore = useCEMStore();

const activeTabName = ref("AreaComposition");

const handleTabClick = () => {};

const isLoading = ref(false);
const timmer = ref(false);
</script>

<style scoped></style>
